<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>天气案例</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>
        <div class="p">

            <h2>今天天气怎么样？{{info}}</h2>
            <button @click="changeWeather()">切换天气</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '.p',
                data: {
                    isHot: true,

                },
                computed: {
                    info() {
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods: {
                    changeWeather() {
                        this.isHot = !this.isHot;
                    }
                }

            })


        </script>
    </body>
</html>